<template>
    <view class="select-list-wrapper">
        <view class="list-item" v-for="(item, index) in datas" :key="index">
            <view class="left">
                <image class="image" :src="easyGetImgUrl(item.ProductImage)" mode="aspectFill"></image>
            </view>
            <view class="right">
                <view class="name text-show-line-1">{{ item.ProductName }}</view>
                <view class="name text-show-line-2">{{item.Description}}</view>
                <view class="right-bottom">
                    <view class="left-area">
                        <view class="text">奖励{{item.RewardTypeName}}</view>
                        <price :price="item.Reward" :type="item.RewardType"/>
                    </view>
                    <view class="item-right">
                        <view class="input-number-box">
                            <button
                                class="number-btn number-btn-minus"
                                :disabled="item.count <= 0"
                                @click="upNum(item, -1)"></button>
                            <view
                                class="btn-input-box"
                                :class="item.count.toString().length > 6 ? 'text-show-line-1' : ''"
                                @click="showpop(item)">
                                {{ item.count }}
                            </view>
                            <button
                                class="number-btn number-btn-plus"
                                :disabled="false"
                                @click="upNum(item, 1)"></button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <uni-popup ref="popAmountTip" type="center" class="popAmountTip" :animation="false" :maskClick="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>请输入数量</text>
                </view>
                <!-- #ifdef APP -->
                <input
                    confirm-type="search"
                    :auto-focus="true"
                    type="digit"
                    maxlength="10"
                    v-model="popinputAmount"
                    class="btn-input btn-input1" />
                <!-- #endif -->
                <!-- #ifndef APP -->
                <input
                    confirm-type="search"
                    :focus="isFocus"
                    :selection-start="selectionStart"
                    maxlength="10"
                    :selection-end="selectionEnd"
                    type="digit"
                    v-model="popinputAmount"
                    class="btn-input btn-input1" />
                <!-- #endif -->
                <view class="pop-action">
                    <view @click="popAmountClose">取消</view>
                    <view @click="popAmountConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import price from "../common/price.vue"
import { mapState, mapMutations } from "vuex"
import { CHANGE_SUNBATH_SELECTED } from "@/store/mutation-type.js"

export default {
	props: {
	    datas: {
	        type: Array,
	        default: [],
	    },
	},
    components: {
        price,
    },
    computed: {
    },
    data() {
        return {
            popinputAmount: "",
            selectionStart: -1,
            selectionEnd: 0,
            isFocus: false,
            selectedItem: {},
        }
    },
	mounted() {
	},
    methods: {
        ...mapMutations("sunbathing", [CHANGE_SUNBATH_SELECTED]),
        upNum(item, num, isReplace = false) {
            console.log("item:", item)
            if (isReplace) {
                item.count = num
            } else {
                item.count += num
            }
            this[CHANGE_SUNBATH_SELECTED](item)
			this.$forceUpdate()
        },
        showpop(item) {
            this.popinputAmount = item.count || ""
            this.selectedItem = item
            this.$refs.popAmountTip.open()
            setTimeout((e) => {
                this.isFocus = true
                this.selectionStart = 0
                this.selectionEnd = this.popinputAmount.toString().length
            }, 100)
        },
        popAmountClose() {
            this.$refs.popAmountTip.close()
            this.blurFn()
        },
        popAmountConfirm() {
            console.log("popinputAmount:", this.popinputAmount)
            this.$refs.popAmountTip.close()
            this.upNum(this.selectedItem, this.popinputAmount, true)
            this.blurFn()
        },
        blurFn() {
            this.$nextTick(() => {
                this.isFocus = false
                this.selectionStart = -1
                this.selectionEnd = -1
            })
        },
    },
}
</script>

<style lang="scss">
.select-list-wrapper {
    padding:48rpx 24rpx;
    padding-bottom: 1rpx;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    background-color: $color-white;

    .list-item {
        display: flex;
        margin-bottom: 24rpx;
        
        .left {
            width: 180rpx;
            height: 180rpx;
            margin-right: 24rpx;

            .image {
                width: 100%;
                height: 100%;
                border-radius: 8rpx;
            }
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
                // @include textTwoLine;
                margin-bottom: 10rpx;
            }

            .right-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left-area {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .text {
                        font-size: 24rpx;
                        color: $color-orange-1;
                    }
                }

                .item-right {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: flex-end;

                    .stock-box {
                        margin-top: 14rpx;
                        display: flex;
                        flex-direction: row;
                        width: 100%;
                        align-items: center;

                        .stock-text {
                            display: flex;
                            flex: 1;
                        }
                    }

                    .input-number-box {
                        .btn-input-box {
                            display: block;
                            text-align: center;
                            font-size: $font-size-26;
                            height: auto;
                        }
                        .number-btn {
                            display: flex;
                            justify-content: center;
                            border: none;
                            background-color: none;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            font-size: 45rpx;
                            line-height: 56rpx;
                            height: 56rpx;
                            width: 56rpx;
                            text-align: center;
                            overflow: hidden;
                            border-radius: 100rpx;
                            display: block;
                            background-repeat: no-repeat;
                            background-size: 100%;
                            background-position: center;

                            &:before {
                                border: none;
                            }

                            &:after {
                                border: none;
                            }
                        }

                        .number-btn-minus {
                            background-image: url(@/static/icon/icon_btn_minus.png);
                        }

                        .number-btn-plus {
                            background-image: url(@/static/icon/icon_btn_plus.png);
                        }
                    }
                }
            }
        }
    }
}
</style>
